<!DOCTYPE html>
<html>
<head>
	<title>Search Hotel - H!Indonesia</title>
	<script type="text/javascript" src="script/jquery-1.9.1.js"></script>
	<script type="text/javascript" src="script/plugins/jquery.tipsy.js"></script>
	<script type="text/javascript" src="script/jquery-ui.js"></script>
	<script type="text/javascript" src="script/plugins/jquery.formatCurrency.js"></script>
	<script type="text/javascript" src="script/plugins/jquery.fancybox.js"></script>
	<script type="text/javascript" src="script/common.js"></script>
	<script type="text/javascript" src="script/page/hotel.js"></script>
	<link rel="stylesheet" type="text/css" href="css/960.css" />
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<link rel="stylesheet" type="text/css" href="css/plugins/tipsy.css" />
	<link rel="stylesheet" type="text/css" href="css/plugins/fancybox.css" />
	<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
	<script type="text/javascript">
		$(function(){
			$(".show-map").fancybox({
				width: 610,
				height: 360,
				type: 'iframe'
			});

			$( "#check-in" ).datepicker({
				setDate: +0,
				numberOfMonths: 2,
				minDate: 0,
				onClose: function( selectedDate ) {
					$( "#check-out" ).datepicker( "option", "minDate", selectedDate );
				}
			});
			$("#check-in").datepicker("setDate", "+0");

			$( "#check-out" ).datepicker({
				setDate: +1,
				numberOfMonths: 2,
				minDate: 0,
				onClose: function( selectedDate ) {
					$( "#check-in" ).datepicker( "option", "maxDate", selectedDate );
				}
			});
			$("#check-out").datepicker("setDate", "+1");

			$( "#slider-price" ).slider({
				range: "min",
				value: 3300000,
				min: 330000,
				max: 3300000,
				step: 100,
				slide: function( event, ui ) {
					$( "#up-price" ).text( ui.value );
					$( "#up-price" ).formatCurrency({
	               		symbol: 'IDR ',
						digitGroupSymbol: '.',
	               		roundToDecimalPlace: 0
	               });
				}
			});

			$( "#up-price" ).text( $( "#slider-price" ).slider( "value" ) );

			$( "#up-price" ).formatCurrency({
				symbol: 'IDR ',
				digitGroupSymbol: '.',
				roundToDecimalPlace: 0
			});

			$( "#slider-star" ).slider({
				range: true,
				min: 0,
				max: 5,
				values: [ 0, 5 ],
				slide: function( event, ui ) {
					setStar1(ui.values[ 0 ]);
					setStar2(ui.values[ 1 ]);
				}
			});

			function setStar1( valueStar ) {
				$( ".star-1" ).empty();
				for (var i = 1; i <= valueStar; i++) {
					$( ".star-1" ).append('<img src="img/icons/icon-star.png">');
				};
				for (var i = 1; i <= 5 - valueStar; i++) {
					$( ".star-1" ).append('<img src="img/icons/icon-star-empty.png">');
				};
			}

			function setStar2( valueStar ) {
				$( ".star-2" ).empty();
				for (var i = 1; i <= valueStar; i++) {
					$( ".star-2" ).append('<img src="img/icons/icon-star.png">');
				};
				for (var i = 1; i <= 5 - valueStar; i++) {
					$( ".star-2" ).append('<img src="img/icons/icon-star-empty.png">');
				};
			}
		});
	</script>
</head>
<body>
	<div class="container_24">
		<header>
			<div class="header-wrapper clearfix">
				<div id="top-bar" class="grid_24">
					<div class="login-box">
						<span class="sign-up-left">
							<a href="#">Sign Up</a>
						</span>
						<span class="separate-or">
						or
						</span>
						<span class="sign-in-right">
							<a href="#">Log In</a>
						</span>
					</div>
					<div class="search-box">
						<button class="search-trigger"></button>
						<input type="text" id="search-keyword" placeholder="search">
					</div>
				</div>
				<div id="site-logo" class="grid_7">
					<a href="#">
						<img src="img/assets/logo.png" alt="H!Indonesia | Online Tourism Information and Booking Ticket"> 
					</a>
				</div>
				<nav id="top-nav" class="grid_17">
					<ul id="menu">
						<li><a href="#">home</a></li>
						<li class="drop"><a href="#">book</a>
							<ul>
								<li><a href="#">flight</a></li>
								<li><a href="#">hotel</a></li>
							</ul>
						</li>
						<li><a href="#">plan</a></li>
						<li><a href="#">explore</a></li>
						<li><a href="#">news</a></li>
						<li><a href="#">travel notes</a></li>
						<li><a href="#">travel guide</a></li>
						<li><a href="#">faq</a></li>
						<li><a href="#">about us</a></li>
					</ul>
				</nav>
			</div>
		</header>
		<section class="sidebar-left grid_8">
			<div class="hotel-left">
				<div class="search-hotel">
					<h2>Search Details</h2>
					<form method="get" autocomplete="off" action="search-hotel#">
						<div class="cols">
							<label for="from">Location / Hotel</label>
							<select id="select-location" name="location" class="large">
								<?php echo $option_cities; ?>
        					</select>
						</div>
						<div class="cols">
							<label for="depart">Check In</label><br>
							<input type="text" id="check-in" name="check-in" class="datepicker">
						</div>
						<div class="cols">
							<label for="return">Check Out</label><br>
							<input type="text" id="check-out" name="check-out" class="datepicker">
						</div>
						<div class="cols">
							<div class="passenger">
								<label for="room">Rooms</label>
								<select name="room" id="room">
					            	<option selected="selected" value="1">1</option>
			                    	<option value="2">2</option>
			                    	<option value="3">3</option>
			                    	<option value="4">4</option>
			        			</select>
			        		</div>
			        		<div class="passenger">
								<label for="adult">Adult</label>
								<select name="adult" id="adult">
			       	            	<option selected="selected" value="1">1</option>
			                    	<option value="2">2</option>
			                    	<option value="3">3</option>
			                    	<option value="4">4</option>
			        			</select>
			        		</div>
		        			<div class="passenger">
								<label for="children">Child <sub>(0-12)</sub></label>
								<select name="children" id="children">
			       	            	<option selected="selected" value="0">0</option>
			                    	<option value="1">1</option>
			                    	<option value="2">2</option>
			                    	<option value="3">3</option>
			                    	<option value="4">4</option>
			        			</select>
			        		</div>
						</div>
						<div class="cols clearfix">
							<input type="submit" value="Search" class="button"> 
						</div>
					</form>
				</div>
				<div class="filter-results">
					<h2>Filter Results</h2>
					<div class="cols">
						<h5>Hotel Name</h5>
						<input type="text" id="hotel-name" name="hotel-name"> 
					</div>
					<div class="cols">
						<h5>Star Rating</h5>
						<ul class="star-rating">
							<li class="star-1"><img src="img/icons/icon-star-empty.png"><img src="img/icons/icon-star-empty.png"><img src="img/icons/icon-star-empty.png"><img src="img/icons/icon-star-empty.png"><img src="img/icons/icon-star-empty.png"></li>
							<li>to</li>
							<li class="star-2"><img src="img/icons/icon-star.png"><img src="img/icons/icon-star.png"><img src="img/icons/icon-star.png"><img src="img/icons/icon-star.png"><img src="img/icons/icon-star.png"></li>
						</ul>
						<div class="slider-wrapper">
							<div id="slider-star" class="slider"></div>
						</div>
					</div>
					<hr>
					<div class="cols">
						<h5>Average Rate per Night</h5>
						<div class="slider-wrapper">
							<div id="slider-price" class="slider"></div>
						</div>
						<div class="price-limit">IDR 330.000 - <span id="up-price"></span></div>
					</div>
					<hr>
					<div class="cols clearfix">
						<h5>Facilities</h5>
						<ul class="filter-list">
							<li>
								<label><input type="checkbox" id="id-10"> Air Conditioning</label>
							</li>
							<li>
								<label><input type="checkbox" id="id-11"> Car Park</label>
							</li>
							<li>
								<label><input type="checkbox" id="id-12"> Shower</label>
							</li>
							<li>
								<label><input type="checkbox" id="id-13">  Wi-Fi in Public Areas</label>
							</li>
							<li>
								<label><input type="checkbox" id="id-13">  Complimentary bottled water</label>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</section>
		<section class="main-content grid_16">
			<div class="hotel-search">
				<div class="head-search-hotel">
					<?php echo $hotel_found; ?>
					<div class="search-sort">
						<ul class="sort-category clearfix">
							<li>Sort by:</li>
							<li class="active"><a href="#">Star (1...5)</a></li>
							<li><a href="#">Star (5...1)</a></li>
							<li><a href="#">Lowest Price</a></li>
							<li><a href="#">Highest Price</a></li>
						</ul>
					</div>
				</div>
				<div class="search-result-hotel">
					<?php echo $searched_hotels; ?>
				</div>
			</div>
		</section>
		<footer>
			<nav class="clearfix">
				<ul class="bottom-nav grid_24">
		          <li><a href="#">About Us</a></li>
		          <li><a href="#">FAQ</a></li>
		          <li><a href="#">Contact Us</a></li>
		          <li><a href="#">Jobs</a></li>
		          <li><a href="#">Our Partner</a></li>
		          <li><a href="#">Press</a></li>
		        </ul>
	        </nav>
	        <section class="footer">
	        	<div class="footer-wrapper clearfix">
		        	<div class="footer-left grid_12">
		        		<ul>
		        			<li><a href="#">Terms of service</a></li>
		        			<li><a href="#">Privacy</a></li>
		        			<li><a href="#">Feedback & support</a></li>
		        		</ul>
		        		<div class="copyright">
		        			&copy; 2013 Hi-Indonesia. All rights reserved.
		        		</div>
		        	</div>
		        	<div class="footer-right grid_12">
		        		<ul>
		        			<li><a href="#">English</a></li>
		        			<li><a href="#">Bahasa</a></li>
		        		</ul>
		        	</div>
	        	</div>
	        </section>
		</footer>
	</div> 
</body>
</html>